js中filter过滤用法总结 |
您所在的位置：网站首页 › sms filter 过滤 › js中filter过滤用法总结 |
|
定义和用法
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意： filter() 不会对空数组进行检测。 注意： filter() 不会改变原始数组。 语法 array.filter(function(currentValue,index,arr), thisValue) 参数说明 参数描述 function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数函数参数: 参数描述 currentValue 必须。当前元素的值 index 可选。当期元素的索引值 arr 可选。当期元素属于的数组对象 thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"
首先回顾一下filter的作用：过滤数组中符合条件的元素 基本用法 123 let arr = [1, 3, 5, 8]let arrFilter = arr.filter(ele => ele > 4)console.log(arrFilter) // [5, 8]另外也可以用来过滤对象数组中符合条件的对象，eg： 12345678910111213 let arrObj = [{ name: 'aa', age: 13}, { name: 'bb', age: 23}, { name: 'cc', age: 18}, { name: 'dd', age: 11}, { name: 'ee', age: 28}]let arrObjFilter = arrObj.filter(ele => ele.age > 18)console.log(arrObjFilter) // [{name: 'bb', age: 23}, {name: 'ee', age: 28}] 进阶用法 数组去重（有点过时） 12345 let arr = [1, 2, 3, 2, 3, 4]let arrFilter = arr.filter((ele, index, arr) => { return arr.indexOf(ele) === index})console.log(arrFIlter)目前比较常用的方法是使用ES6的set完成，eg： 123 let arr = [1, 2, 3, 2, 3, 4]let arrFilter = [...new Set(arr)]console.log(arrFilter) 数组中的空字符去除 12345 let arr = ['1', '2', '3', '', null, undefined, ' ', '4']let arrFilter = arr.filter((ele, index, arr) => { return ele && ele.trim()})console.log(arrFIlter) 高级用法结合map使用可以先过滤出符合条件的对象然后去除某些不需要的字段,比如: 12345678910111213141516 // 需求: 年龄大于18的姓名let arrObj = [{ name: 'aa', age: 13}, { name: 'bb', age: 23}, { name: 'cc', age: 18}, { name: 'dd', age: 11}, { name: 'ee', age: 28}]let arrObjFilter = arrObj.filter(ele => ele.age > 18).map(ele => { return ele.name})console.log(arrObjFilter) // ['bb', 'ee']
filter() 简单讲filter就是一个数组过滤器，参数接收一个函数，数组的每一项经过函数过滤，返回一个符合过滤条件的新数组 函数接收三个参数： item （当前遍历的数组项） i （当前项索引） arr （调用filter数组本身） // 需求找到数组内偶数 let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] let newArr = arr.filter((item, i, arr) => { //函数本身返回布尔值，只有当返回值为true时，当前项存入新数组。 return item % 2 == 0 }) console.log(newArr)再来一个应用，巧妙地用filter结合indexof实现去重 indexOf在js中有着重要的作用，可以判断一个元素是否在数组中存在，或者判断一个字符是否在字符串中存在，如果存在返回该元素或字符第一次出现的位置的索引，不存在返回-1。 let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 2, 3, 4, 5, 6, 7] let newArr = arr1.filter(function(item, i, self) { let a = self.indexOf(item) console.log(`item----${item},self.indexOf(item)---${a},i----${i}`) return self.indexOf(item) === i; }); console.log(newArr) //[1, 2, 3, 4, 5, 6, 7, 8]
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |